<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        span{
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            color: #333;
            background: #a125aa;
            min-width: 80px;
            padding: 0 10px;
            margin: 10px;
            transition: all .4s;
        }

        .ech-big:hover{
            transform: scale(1.2);
        }
        .ech-small:hover{
            transform: scale(0.8);
        }

        .ech-skew-l:hover{
            transform: skew(-15deg);
        }
        .ech-skew-r:hover{
            transform: skew(15deg);
        }
        .ech-skew-l-t{
            transform-origin: left top;
        }
        .ech-skew-l-t:hover{
            transform: skew(-15deg);
        }
        .ech-skew-r-t{
            transform-origin: right top;
        }
        .ech-skew-r-t:hover{
            transform: skew(15deg);
        }
        .ech-skew-l-b{
            transform-origin: left bottom;
        }
        .ech-skew-l-b:hover{
            transform: skew(-15deg);
        }
        .ech-skew-r-b{
            transform-origin: right bottom;
        }
        .ech-skew-r-b:hover{
            transform: skew(15deg);
        }

        .ech-rotate-5:hover {
            transform: rotate(-5deg);
        }
        .ech-rotate5:hover {
            transform: rotate(5deg);
        }
        .ech-rotate-90{
            transform-origin: right;
        }
        .ech-rotate-90:hover {
            transform: rotate(-90deg);
        }
        .ech-rotate90{
            transform-origin: left;
        }
        .ech-rotate90:hover {
            transform: rotate(90deg);
        }
        .ech-rotate-180:hover {
            transform: rotate(-180deg);
        }
        .ech-rotate180:hover {
            transform: rotate(180deg);
        }
        .ech-rotate-360:hover {
            transform: rotate(-360deg);
        }
        .ech-rotate360:hover {
            transform: rotate(360deg);
        }

        .ech-t:hover {
            transform: translate3d(0, -10px, 0);
        }
        .ech-b:hover {
            transform: translate3d(0, 10px, 0);
        }
        .ech-l:hover {
            transform: translate3d(-10px, 0, 0);
        }
        .ech-r:hover {
            transform: translate3d(10px, 0, 0);
        }

    </style>
</head>
<body>
    <span>于大眼</span>
    <hr>

<!--hover动画-->
    <!--大小变化-->
    <span class="ech-big">big</span>
    <span class="ech-small">small</span>
    <hr>
    <!--形状变化-->
    <span class="ech-skew-l">skew-l</span>
    <span class="ech-skew-l-t">skew-l-t</span>
    <span class="ech-skew-l-b">skew-l-b</span>

    <span class="ech-skew-r">skew-r</span>
    <span class="ech-skew-r-t">skew-r-t</span>
    <span class="ech-skew-r-b">skew-r-b</span>
    <hr>

    <!--    旋转变化-->
    <span class="ech-rotate5">rotate5</span>
    <span class="ech-rotate90">rotate90-l</span>
    <span class="ech-rotate180">rotate180</span>
    <span class="ech-rotate360">rotate360</span>
    <span class="ech-rotate-5">rotate-5</span>
    <span class="ech-rotate-90">rotate-90-r</span>
    <span class="ech-rotate-180">rotate-180</span>
    <span class="ech-rotate-360">rotate-360</span>
    <hr>
    <!--    位移变化-->
    <span class="ech-t">up</span>
    <span class="ech-b">bottom</span>
    <span class="ech-l">left</span>
    <span class="ech-r">right</span>

</body>
</html>